<script>
    var queueContainer = new Vue({
        el:"#queueContainer",
        methods:{
            submit: function(formId){
                formId = "#"+formId;
                BJUI.ajax('ajaxform', {
                    url: $(formId).prop("action"),
                    form: $.CurrentNavtab.find(formId),
                    validate:true,
                    loadingmask: true,
                    okCallback: function(json, options) {
                        if(json.statusCode == BJUI.statusCode.ok){
                            BJUI.alertmsg("ok", "发送消息成功，请到ActiveMQ管理界面查看")
                        }else{
                            BJUI.alertmsg("error", json.message);
                        }
                    }
                });
            }
        }
    });
</script>

<style>
    .centerElement{
        margin: 0 auto;
        text-align: center;
    }
</style>

<div class="bjui-pageHeader" id="messageManageHeader">
    <a href="${amqUrl}/queues.jsp" class="btn btn-green" target="_blank">查看消息</a>
    <span><--- 账号：admin &nbsp;&nbsp;密码：admin</span>
</div>

<div class="bjui-pageContent" id="queueContainer">
    <div style="padding-bottom: 10px;">
        <br>
        <form action="/message/message/sendQueueSave" id="sendQueueForm_1" data-toggle="validate" data-alertmsg="false">
            <table class=" table-striped table-condensed table-bordered centerElement">
                <thead>
                <tr>
                    <th colspan="2" style="text-align: center">自定义消息名、消息内容</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><label >queue名称：</label></td>
                        <td><input class="form-control" name="name" type="text" data-rule="required"></td>
                    </tr>
                    <tr>
                        <td><label >消息内容：</label></td>
                        <td><input class="form-control" name="payload" type="text" data-rule="required"></td>
                    </tr>
                    <tr>
                        <td ><button type="button" class="btn-blue" @click="submit('sendQueueForm_1')" data-icon="save">确定</button></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>

    <div style="margin:10px auto 0 auto;">
        <form action="/message/message/sendQueueSave" class="form-inline" id="sendQueueForm_2" data-toggle="validate" data-alertmsg="false">
            <table class=" table-striped table-condensed table-bordered centerElement">
                <thead>
                <tr>
                    <th colspan="2" style="text-align: center">有消费者的消息</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><label >queue名称：</label></td>
                    <td><input class="form-control" name="name" value="test.queue" type="text" readonly="readonly" data-rule="required"></td>
                </tr>
                <tr>
                    <td><label >消息内容：</label></td>
                    <td><input class="form-control" name="payload" type="text" data-rule="required"></td>
                </tr>
                <tr>
                    <td ><button type="button" @click="submit('sendQueueForm_2')" class="btn-blue" data-icon="save">确定</button></td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>